<template>
  <view
    :class="visable ? 'insurance-root2' : 'insurance-root'"
    :style="fullStyle"
  >
    <view class="problem-search-root" v-show="!visable">
      <u-input
        @input="resetQuery"
        placeholder="姓名/身份证号"
        suffixIcon="arrow-down"
        border="none"
        disabledColor="#ffffff"
        v-model="keyword"
      >
      </u-input>
      <u-button
        @click="addRow()"
        color="#569A5D"
        text="新增"
        class="diy-cutton add-button"
      ></u-button>
    </view>
    <view class="item-root" v-show="!visable">
      <u-list @scrolltolower="loadMore">
        <u-list-item v-for="(item, index) in tableData" :key="index">
          <view class="content-container">
            <!-- <view class="title-root">
              <view class="title-containet">
                <view class="icon">投保面积</view>
                <view class="title">
                  {{ item.area }}
                </view>
              </view>
            </view> -->
            <view class="info-container">
              <view class="row row1">
                <view class="info-item lx">
                  <view class="label"> 投保面积(㎡)： </view>
                  <view class="value">
                    {{ item.area }}
                  </view>
                </view>
              </view>

              <view class="row row1">
                <view class="info-item gnq">
                  <view class="label"> 业务人员联系方式： </view>
                  <view class="value">
                    {{ item.businessPersonContact }}
                  </view>
                </view>
              </view>

              <view class="row row2">
                <view class="info-item lx">
                  <view class="label"> 业务人员姓名： </view>
                  <view class="value">
                    {{ item.businessPersonName }}
                  </view>
                </view>
              </view>

              <view class="row row1">
                <view class="info-item gnq">
                  <view class="label"> 联系方式： </view>
                  <view class="value">
                    {{ item.contact }}
                  </view>
                </view>
              </view>

              <view class="row row1">
                <view class="info-item lx">
                  <view class="label"> 身份证号码： </view>
                  <view class="value">
                    {{ item.idCardNum }}
                  </view>
                </view>
              </view>

              <view class="row row1">
                <view class="info-item gnq">
                  <view class="label"> 投保金额： </view>
                  <view class="value">
                    {{ item.money }}
                  </view>
                </view>
              </view>

              <view class="row row1">
                <view class="info-item lx">
                  <view class="label"> 姓名： </view>
                  <view class="value">
                    {{ item.personName }}
                  </view>
                </view>
              </view>

              <view class="row row1">
                <view class="info-item lx">
                  <view class="label"> 种植作物类型： </view>
                  <view class="value">
                    {{ item.plantType }}
                  </view>
                </view>
              </view>
            </view>
          </view>
          <!-- <view class="con-container" @click="showCurrent(item)">
            <view class="txt">{{ item.showFlag ? "收起" : "展开" }}</view>
            <view class="icon">
              <u-icon v-if="item.showFlag" name="arrow-up"></u-icon>
              <u-icon v-if="!item.showFlag" name="arrow-down"></u-icon>
            </view>
          </view> -->
        </u-list-item>
      </u-list>
    </view>
    <!-- 保险数据 -->
    <view class="add-page" v-show="visable">
      <view>
        <u-form ref="uForm" :model="prpLregist" :rules="rules">
          <u-form-item label="投保面积(㎡)" label-width="140" prop="area">
            <u-input
              class="uni-input"
              v-model="prpLregist.area"
              placeholder="请输入投保面积"
              maxlength="100"
            />
          </u-form-item>
          <u-form-item
            label="业务人员联系方式"
            label-width="140"
            prop="businessPersonContact"
          >
            <u-input
              class="uni-input"
              v-model="prpLregist.businessPersonContact"
              placeholder="请输入业务人员联系方式"
              maxlength="100"
            />
          </u-form-item>
          <u-form-item
            label="业务人员姓名"
            label-width="140"
            prop="businessPersonName"
          >
            <u-input
              class="uni-input"
              v-model="prpLregist.businessPersonName"
              placeholder="请输入业务人员姓名"
              maxlength="100"
            />
          </u-form-item>
          <u-form-item label="联系方式" label-width="140" prop="contact">
            <u-input
              class="uni-input"
              v-model="prpLregist.contact"
              placeholder="请输入联系方式"
              maxlength="100"
            />
          </u-form-item>
          <u-form-item label="身份证号码" label-width="140" prop="idCardNum">
            <u-input
              class="uni-input"
              v-model="prpLregist.idCardNum"
              placeholder="请输入身份证号码"
              maxlength="100"
            />
          </u-form-item>
          <u-form-item label="投保金额" label-width="140" prop="money">
            <u-input
              class="uni-input"
              type="number"
              v-model="prpLregist.money"
              placeholder="请输入投保金额"
              maxlength="100"
            />
          </u-form-item>
          <u-form-item label="姓名" label-width="140" prop="personName">
            <u-input
              class="uni-input"
              v-model="prpLregist.personName"
              placeholder="请输入姓名"
              maxlength="100"
            />
          </u-form-item>
          <u-form-item label="种植作物类型" label-width="140" prop="plantType">
            <u-input
              class="uni-input"
              v-model="prpLregist.plantType"
              placeholder="请输入种植作物类型"
              maxlength="100"
            />
          </u-form-item>
          <!-- 地图和画地块 -->
          <u-form-item label="地图" label-width="140">
            <map
              id="map"
              longitude="116.397470"
              latitude="39.908823"
              scale="14"
              @regionchange="onRegionChange"
              @tap="onMapTap"
            >
              <cover-view v-if="polygonPoints.length" class="polygon-cover">
                已绘制地块
              </cover-view>
            </map>
          </u-form-item>
        </u-form>
      </view>
    </view>
    <view class="button-area" v-show="visable">
      <u-button
        @click="submit"
        color="#569A5D"
        text="提交"
        class="diy-cutton add-button"
      ></u-button>
      <u-button
        @click="visable = !visable"
        text="返回"
        class="diy-cutton add-button"
      ></u-button>
    </view>
    <u-loading-page :loading="loading"></u-loading-page>
  </view>
</template>

<script>
import { baseMixins } from "@/mixins/baseMixins";
import { queryAcquisitionList, saveAcquisition } from "@/api";
import { requestPost, requestGet } from "@/util/request";

export default {
  mixins: [baseMixins],
  data() {
    return {
      polygonPoints: [], // 存储地块的坐标点
      disabled: false,
      visable: false,
      keyword: "",
      queryParam: {
        pageNum: 1,
        pageSize: 10,
        personName: null,
        idCardNum: null,
      },
      total: 0,
      loading: false,
      tableData: [],
      prpLregist: {
        area: "", // 投保面积(平方米)
        businessPersonContact: "", // 业务人员联系方式
        businessPersonName: "", // 业务人员姓名
        contact: "", // 联系方式
        idCardNum: "", // 身份证号码
        money: "", // 投保金额
        personName: "", // 姓名
        plantType: "", // 种植作物类型
      },
      rules: {
        area: [
          { required: true, message: "投保面积不能为空", trigger: "blur" },
        ],
        businessPersonContact: [
          {
            required: true,
            message: "业务人员联系方式不能为空",
            trigger: "blur",
          },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "手机号码格式不正确",
            trigger: "blur",
          },
        ],
        businessPersonName: [
          { required: true, message: "业务人员姓名不能为空", trigger: "blur" },
        ],
        contact: [
          { required: true, message: "联系方式不能为空", trigger: "blur" },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "手机号码格式不正确",
            trigger: "blur",
          },
        ],
        idCardNum: [
          { required: true, message: "身份证号码不能为空", trigger: "blur" },
          {
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: "身份证号码格式不正确",
            trigger: "blur",
          },
        ],
        money: [
          { required: true, message: "投保金额不能为空", trigger: "blur" },
        ],
        personName: [
          { required: true, message: "姓名不能为空", trigger: "blur" },
        ],
        plantType: [
          { required: true, message: "种植作物类型不能为空", trigger: "blur" },
        ],
      },
      // 正则表达式用于匹配姓名
      nameRegex: /^[\u4e00-\u9fa5]{1,4}$/, // 假设姓名为2到4个汉字
      // 正则表达式用于匹配身份证号
      idCardRegex:
        /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}(\d|X|x)$/,
      markers: [], // 地图标记
      polyline: [], // 地图折线
    };
  },
  methods: {
    onRegionChange(e) {
      // 当地图区域发生变化时的处理函数
      if (this.polygonPoints.length) {
        // 如果已经绘制地块，不再处理区域变化
        return;
      }
      // 处理地块绘制逻辑
    },
    onMapTap(e) {
      // 当点击地图时的处理函数
      if (this.polygonPoints.length < 3) {
        // 至少需要3个点才能构成一个地块
        uni.showToast({
          title: "至少需要3个点",
          icon: "none",
        });
        return;
      }
      // 添加点到地块坐标点数组
      this.polygonPoints.push({
        latitude: e.detail.latitude,
        longitude: e.detail.longitude,
      });
    },
    resetQuery() {
      this.queryParam.pageNum = 1;
      if (this.nameRegex.test(this.keyword)) {
        this.queryParam.personName = this.keyword;
      }
      if (this.idCardRegex.test(this.keyword)) {
        this.queryParam.idCardNum = this.keyword;
      }
      this.tableData = [];
      this.getList();
    },
    getList() {
      this.tableData = [];
      this.loading = true;
      requestGet({
        url: queryAcquisitionList,
        data: this.queryParam,
      })
        .then((res) => {
          uni.$u.toast("加载成功");
          this.tableData = this.tableData.concat(
            res.rows.map((item) => {
              item.showFlag = false;
              return item;
            })
          );
          this.total = res.total;
        })
        .finally((e) => {
          this.loading = false;
        });
    },
    addRow() {
      this.visable = true;
    },
    submit() {
      this.$refs.uForm.validate();
      let valid = true;
      Object.keys(this.prpLregist).forEach((key) => {
        if (!this.prpLregist[key] || this.prpLregist[key] == "") {
          valid = false;
        }
      });
      if (valid) {
        this.loading = true;
        requestPost({
          url: saveAcquisition,
          data: this.prpLregist,
        })
          .then((res) => {
            uni.showToast({
              title: "提交成功",
              icon: "success",
              duration: 2000,
            });
            this.$refs.uForm.resetFields();
            this.visable = false;
            this.getList();
          })
          .finally((e) => {
            this.loading = false;
          });
      } else {
        console.log("表单校验失败");
      }
    },
    backTo(url) {
      uni.navigateTo({
        url: url,
      });
    },
    getAddress() {
      uni.getLocation({
        success: (res) => {
          this.prpLregist.latitude = res.latitude;
          this.prpLregist.longitude = res.longitude;
        },
      });
      uni.authorize &&
        uni.authorize({
          scope: "scope.userLocation",
          success() {
            // 用户已经同意小程序使用定位功能
            uni.getLocation({
              type: "wgs84", // 返回可以用于uni.openLocation的经纬度，默认为wgs84的gps坐标
              success: function (res) {
                this.prpLregist.latitude = res.latitude;
                this.prpLregist.longitude = res.longitude;
              },
              fail: function (error) {
                console.error("获取位置失败：", error);
              },
            });
          },
          fail() {
            // 用户拒绝了小程序使用定位功能的权限
            uni.showModal({
              title: "提示",
              content: "此功能需要获取您的地理位置，请确认授权",
              success: function (modalRes) {
                if (modalRes.confirm) {
                  uni.openSetting(); // 引导用户去设置中开启权限
                }
              },
            });
          },
        });
    },
  },
  created() {},
  mounted() {},
  onLoad() {
    this.getList();
  },
};
</script>

<style scoped lang="scss">
$font-size: 25rpx;
.insurance-root {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 10rpx 20rpx 0rpx 10rpx;

  .problem-search-root {
    height: 80rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    margin-top: 10rpx;
    .add-button {
      width: 200rpx;
      height: 100%;
      margin-left: 10rpx;
    }

    .u-input {
      height: 100%;
      background: #fff;
      padding: 0rpx 20rpx !important;

      .u-input__content {
        padding-right: 30rpx;
      }

      .uni-input-input,
      .uni-input-placeholder {
        padding: 0 10rpx 0 20rpx;
        box-sizing: border-box;
      }
    }
  }

  .item-root {
    width: 100%;
    height: calc(100% - 100rpx);
    margin-top: 20rpx;
    border-radius: 20rpx;

    .u-list {
      height: 100% !important;
    }

    .u-list-item {
      margin-bottom: 40rpx;
      border-radius: 20rpx;
      background: #fff;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .content-container {
      width: 100%;
      display: flex;
      flex-direction: column;
      padding: 30rpx;
      box-sizing: border-box;
      border-bottom: 2rpx solid #efefef;
      border-radius: 20rpx;

      .title-root {
        margin-bottom: 20rpx;
        display: flex;
        justify-content: space-between;
        // background: pink;
        align-items: center;

        .title-containet {
          display: flex;
          width: max-content;
          justify-content: flex-start;
          font-size: $font-size;
          font-weight: 500;
          align-items: center;

          .icon {
            border: 4rpx solid #000;
            border-radius: 10rpx;
            height: max-content;
            padding: 0 10rpx;
            margin-right: 10rpx;
            box-sizing: border-box;
            font-size: $font-size;
            position: relative;
            top: 4rpx;
          }
        }
      }

      .info-container {
        display: flex;
        flex-direction: column;

        .row {
          display: flex;
          width: 100%;
          margin-bottom: 15rpx;
          height: max-content;

          .info-item {
            display: flex;
            text-align: center;
            height: max-content;

            .label {
              text-align: center;
              width: max-content;
              margin-right: 5rpx;
              font-size: $font-size;
              color: #000;
              font-weight: 500;
            }

            .value {
              color: #333;
              text-align: center;
              height: 100%;
              font-size: $font-size;
            }
          }
        }
      }
    }

    .con-container {
      display: flex;
      justify-content: center;
      padding: 10rpx;
      height: max-content;
      align-items: center;

      .txt {
        font-size: $font-size;
      }
    }
  }

  .uni-input {
    // width: 40vw;
    height: 48rpx;
    border-radius: 8rpx;
    opacity: 1;
    font-size: 28rpx;
    line-height: 52rpx;

    background: #f9f9f9;

    ::v-deep uni-input {
      width: 40vw;
      height: 100%;
    }
  }
  .button-area {
    width: 90vw;
    margin-bottom: 20rpx;
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 20rpx;
    left: 5vw;

    ::v-deep .u-button {
      font-family: PingFang SC;
      font-size: 32rpx;
      font-weight: 800;
      line-height: normal;
      letter-spacing: 0em;
      margin-left: 10rpx;
      border-radius: 20rpx;
    }
  }
  .add-page {
    width: 95%;
    height: 100vh;
    background-color: #fff;
    padding: 10rpx 20rpx;
  }
}

.insurance-root2 {
  @extend .insurance-root;
  padding: 0;
}
</style>
